<template>
    <div>
        <div class="header">
            <img class="log" src="../../assets/img/log.png" @click="toIndex"/>
            <div style="display: flex; flex-direction: column; align-items: flex-start; cursor: pointer;" @click="toIndex">
                <div class="name">联名纵横智能语音系统</div>
                <div class="lang-name">Lianming AI Speech System</div>
            </div>

            <div class="nav">
                <div class="nav-item" :class="[type === 'index' && 'active']" @click="nav(4)">首页</div>
                <div class="nav-item" :class="[type === 'word-to-voice' && 'active']" @click="nav(1)">文字转语音</div>
                <div class="nav-item" :class="[type === 'voice-to-word' && 'active']" @click="nav(2)">语音转文字</div>
                <div class="nav-item" :class="[type === 'customized' && 'active']" @click="nav(3)">音库定制</div>
                <!--<div class="nav-item" :class="[type === 'about-us' && 'active']" @click="nav(4)">关于我们</div>-->
            </div>
            <template v-if="isLogin">
                <div class="integral text-center" @click="nav(5)">充值积分 {{$root.userInfo.integral}}</div>
                <div class="portrait" @click="toPersonal">
                    <img :src="$root.userInfo.wxHead" alt=""/>
                </div>
                <div class="portrait-name" @click="toPersonal">{{ $root.userInfo.wxName }}</div>
            </template>
            <img v-else class="i12" @click="toLogin" src="../../assets/img/9.png"/>
        </div>

        <!--
        <div class="header-not" v-else>
          <div class="i1 container-align mar-center">
            <img class="i11" src="../../assets/img/8.png" @click="toIndex"/>
            <img class="i12" @click="toLogin" src="../../assets/img/9.png"/>
          </div>
        </div>
        -->

    </div>
</template>

<script>
export default {
    name: "headerA",
    props: {
        type: {
            type: String,
            default: ''
        }
    },
    data () {
        return {
            navId: 1,
            isLogin: false
        };
    },
    created () {
        this.isLogin = !!this.$root.userInfo
    },
    methods: {
        toLogin () {
            this.$router.push('/login')
        },
        toPersonal () {
            this.$router.push('/personal')
        },
        toIndex () {
            this.$router.push('/index')
        },
        nav (type) {
            this.navId = type;
            switch (type) {
                case 1:
                    this.$router.push('/word-to-voice')
                    break;
                case 2:
                    this.$router.push('/voice-to-word')
                    break;
                case 3:
                    this.$router.push('/customized')
                    break;
                case 4:
                    this.$router.push('/index')
                    break;
                case 5:
                    this.$router.push('/charge')
                    break;
            }
        }
    }
}
</script>

<style scoped lang="scss">
.header-not {
    height: 62px;
    background-color: #26C6AB;
    .i1{
        width: 1200px;
        justify-content: space-between;
        .i11{
            width: 270px;
            height: 62px;
            cursor: pointer;
        }
        .i12{
            width: 73px;
            height: 31px;
            cursor: pointer;
        }
    }
}
.header{
    height: 62px;
    background-color: #26C6AB;
    display: flex;
    align-items: center;
    justify-content: center;
    .i12{
        width: 73px;
        height: 31px;
        cursor: pointer;
    }
    .portrait{
        width: 48px;
        min-width: 48px;
        height: 48px;
        background-color: #FFFFFF;
        border-radius: 50%;
        margin-left: 21px;
        cursor: pointer;
        overflow: hidden;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .portrait-name{
        color: #ffffff;
        margin-left: 10px;
        cursor: pointer;
        white-space: nowrap;
    }
    .integral{
        width: 125px;
        min-width: 125px;
        height: 31px;
        line-height: 31px;
        padding: 0 4px;
        background-color: #FFCB79;
        border-radius: 3px;
        font-size: 14px;
        font-family: PingFang SC,serif;
        color: #FFFFFF;
        margin-left: 20px;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .nav{
        display: flex;
        align-items: center;
        min-width: 536px;
        .nav-item{
            font-size: 16px;
            font-family: PingFang SC,serif;
            color: #FFFFFF;
            margin-left: 62px;
            cursor: pointer;
            height: 62px;
            line-height: 62px;
        }
        .nav-item.active{
            position: relative;
            &:after{
                width: 86px;
                height: 0;
                border-bottom: 3px solid #FFFFFF;
                position: absolute;
                bottom: 0;
                left: 50%;
                content: '';
                margin-left: -43px;
            }
        }
    }
    .log{
        height: 62px;
        width: 62px;
        cursor: pointer;
    }
    .name{
        height: 28px;
        font-size: 20px;
        font-family: PingFang SC,serif;
        line-height: 28px;
        color: #FFFFFF;
        white-space: nowrap;
    }
    .lang-name{
        height: 16px;
        font-size: 11px;
        font-family: PingFang SC,serif;
        line-height: 16px;
        color: #FFFFFF;
        letter-spacing: 1px;
        white-space: nowrap;
    }
}
</style>